<!-- 用户编辑弹窗 -->
<template>
  <el-dialog
    width="680px"
    :visible="visible"
    :lock-scroll="false"
    :destroy-on-close="true"
    custom-class="ele-dialog-form"
    :title="isUpdate?'修改':'添加'"
    @update:visible="updateVisible">
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      label-width="82px">
      <el-row :gutter="15">
        <el-col :sm="12">
          <el-form-item label="姓名:" prop="name">
            <el-input
              clearable
              disabled
              :maxlength="20"
              v-model="form.name"
              placeholder="请输入姓名"/>
          </el-form-item>
          <el-form-item label="学号:" prop="student_no">
            <el-input
              clearable
              disabled
              :maxlength="20"
              v-model="form.student_no"
              placeholder="请输入学号"/>
          </el-form-item>
          <el-form-item label="性别:" prop="gender">
            <el-select
            disabled
              clearable
              class="ele-block"
              v-model="form.gender"
              placeholder="请选择性别">
              <el-option label="男" :value="1"/>
              <el-option label="女" :value="2"/>
              <el-option label="未知" :value="0"/>
            </el-select>
          </el-form-item>
          <el-form-item label="报警内容:" prop="da_type_name">
            <el-input
              clearable
              disabled
              v-model="form.da_type_name"
              placeholder="请输入报警内容"/>
          </el-form-item>
        </el-col>
        <el-col :sm="12">
          <el-form-item label="所属学校:" prop="schoole_id">
            <el-select style="width:100%" clearable
            disabled
              v-model="form.schoole_id"
              placeholder="请输入所属学校">
              <el-option :value="item.id" :label="item.title" v-for="(item,index) in schoolList" :key="index"/>
            </el-select>
          </el-form-item>
          <el-form-item label="年级:" prop="grade_id">
            <el-select style="width:100%" clearable
            disabled
              v-model="form.grade_id"
              placeholder="请输入年级">
              <el-option :value="item.id" :label="item.title" v-for="(item,index) in gradeList" :key="index"/>
            </el-select>
          </el-form-item>
          <el-form-item label="班级:" prop="class_id">
            <el-select style="width:100%" clearable
            disabled
              v-model="form.class_id"
              placeholder="请输入班级">
              <el-option :value="item.id" :label="item.title" v-for="(item,index) in classList" :key="index"/>
            </el-select>
          </el-form-item>
          <el-form-item label="是否处理:" prop="status">
            <el-select
              clearable
              class="ele-block"
              v-model="form.status"
              placeholder="请选择是否处理">
              <el-option label="否" :value="0"/>
              <el-option label="是" :value="1"/>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer">
      <el-button
        @click="updateVisible(false)">取消
      </el-button>
      <el-button
        type="primary"
        :loading="loading"
        @click="save">保存
      </el-button>
    </div>
  </el-dialog>
</template>

<script>

export default {
  name: 'UserEdit',
  props: {
    // 弹窗是否打开
    visible: Boolean,
    // 修改回显的数据
    data: Object
  },
  components: {},
  data() {
    return {
      // 表单数据
      form: this.data,
      // 表单验证规则
      rules: {
        status: [
          {required: true, message: '请选择状态', trigger: 'blur'}
        ],
        schoole_id: [
          {required: true, message: '请输入学校', trigger: 'blur'}
        ],
      },
      // 提交状态
      loading: false,
      // 是否是修改
      isUpdate: false,

      schoolList: [],
      gradeList: [],
      classList:[],
    };
  },
  watch: {
    data() {
      if (this.data) {
        this.form = this.data
        this.isUpdate = true;
      } else {
        this.form = {};
        this.isUpdate = false;
      }
    },
    'form.schoole_id': {
      handler: function () { 
            this.getGradeList()
      },
      deep:true
    },
     'form.grade_id': {
      handler: function () { 
            this.getClassList()
      },
      deep:true
     }
  },
  mounted() {
    this.getSchoolList()
  },
  methods: {
    // getSchoolList() {
    //   this.$http
    //     .get("/user/getSchoolList", { params: { streets_code:this.form.streets_code } })
    //     .then(res => {
    //       this.schoolList = res.data.data;
    //     })
    //     .catch(e => {
    //       this.$message.error(e.message);
    //     });
    // },
    getSchoolList() { 
      this.$http.get("/schoole/index", {
        params: {
          page: 1,
          limit: 999,
        }
      }).then(res => {
          this.schoolList = res.data.data;
        })
        .catch(e => {
          this.$message.error(e.message);
        });
    },
    getGradeList() {
      this.$http
        .get("/student/getGrade", { params: { schoole_id: this.form.schoole_id} })
        .then(res => {
          this.gradeList = res.data.data;
        })
        .catch(e => {
          this.$message.error(e.message);
        });
    },
    getClassList() {
      this.$http
        .get("/student/getClass", { params: { grade_id: this.from.grade_id,schoole_id:this.form.schoole_id } })
        .then(res => {
          this.classList = res.data.data;
        })
        .catch(e => {
          this.$message.error(e.message);
        });
    },
    /* 保存编辑 */
    save() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.loading = true;
          this.$http.post('/resortlog/edit', this.form).then(res => {
            this.loading = false;
            if (res.data.code === 0) {
              this.$message({type: 'success', message: res.data.msg});
              if (!this.isUpdate) {
                this.form = {};
              }
              this.updateVisible(false);
              this.$emit('done');
            } else {
              this.$message.error(res.data.msg);
            }
          }).catch(e => {
            this.loading = false;
            this.$message.error(e.message);
          });
        } else {
          return false;
        }
      });
    },
    /* 更新visible */
    updateVisible(value) {
      this.$emit('update:visible', value);
    }
  }
}
</script>

<style scoped>
</style>
